<!-- 绝对定位布局 圆角 阴影 重叠 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位布局和圆角以及阴影</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script></script>
<body>
<div class="divcss5">
    <div class="divcss5-a"></div>
    <div class="divcss5-b"></div>
    <!--<div class="divcss5-c"></div>-->
</div>
</body>
<style>
    .divcss5 {
        position: relative;
        width: 500px;
        height: 400px;
        background: #F00;
        border: 1px solid #000;
    }

    .divcss5-a {
        position: absolute;
        width: 200px;
        height: 100px;
        left: 10px;
        top: 10px;
        background: #0F0;
        z-index: 80;
        border-radius: 25px;
        box-shadow: 5px 5px 5px 2px black;
    }

    .divcss5-b {
        position: absolute;
        width: 200px;
        height: 100px;
        left: 10px;
        top: 200px;
        background: #00F;
        z-index: 150;
        border-radius: 5px 10px 15px 20px;
        box-shadow: 10px 10px 10px 10px orange;
    }

    .divcss5-c {
        position: absolute;
        width: 300px;
        height: 100px;
        left: 60px;
        top: 40px;
        background: orange;
        z-index: 60;
    }
</style>
</html>